<template>

	<div class="main">
		<el-row :gutter="0" style="margin-top: 0.625rem;">
			<el-col :xs="{span:24}" :sm="{span:24}" :md="{span:16}" :lg="{span:16}" :xl="{span:16}">
				<div class="grid-content bg-purple pageTabs" style="margin:0 40px 0 40px">
					<!-- <el-tabs type="border-card" @tab-click="handleClick">
						<el-tab-pane v-for="item in items" :label="item.title" :key="item.index">
							<span v-html="item.details"></span>
						</el-tab-pane>
					</el-tabs> -->
				</div>
				<div style="margin-bottom: 16px;"></div>
				<div style="margin-bottom: 16px;"></div>
				<div>
					<el-row style="margin: 0 40px 20px 40px;" v-loading='list_loading_main'
						element-loading-text="拼命加载资源中" element-loading-background="rgba(255, 255, 255, 1)">
						<!-- <div style="min-height: 9.375rem;background-color: #FFFFFF;margin: 0 40px 40px 40px;"
							v-show="list_loading_main">
						</div> -->
						<el-col :xs="{span:24}" :sm="{span:12}" :md="{span:12}" :lg="{span:8}" :xl="{span:8}"
							v-for="(cardItem, index) in cardList" :key="index">
							<el-card class="card_child card-list-item" shadow="hover" :body-style="{ padding: '20px'}">

								<template #header>
									<a target="_blank" :href="getRootPath()+'/detail?rid='+cardItem.recommendId">
										<img width="64" height="64" :src="cardItem.icon" class="image" />
										<div>
											<span class="home_card_title"
												style="font-size: 18px;">{{cardItem.recommendName}}</span>
											<div class="bottom">
												<div class="home_card_content">
													{{cardItem.description}}
												</div>
												<!-- 标签模块 -->
												<div>
													<span v-for="tag in cardItem.tag">
														<el-tag class="tag-style" effect="plain" type="info">
															{{tag}}
														</el-tag>
													</span>
												</div>
											</div>
										</div>
									</a>
								</template>
								<el-button-group>
									<!--访问按钮 -->
									<el-tooltip class="item" effect="dark" content="直接访问" placement="top-start">
										<el-button icon="el-icon-paperclip" @click="handleLink(cardItem.link)">
										</el-button>
									</el-tooltip>
									<!-- 分享按钮 -->
									<el-tooltip class="item" effect="dark" content="分享" placement="top-start">
										<el-button icon="el-icon-share" @click="handleCpoy(cardItem.recommendId)">
										</el-button>
									</el-tooltip>
									<!-- 收藏按钮 -->
									<el-tooltip class="item" effect="dark" content="收藏" placement="top-start"
										v-if="cardItem.hasCollect===false">
										<el-button :data-id="cardItem.recommendId" ref="collect" icon="el-icon-star-off"
											@click="handleClick(cardItem.recommendId,index)">
											{{cardItem.collectNumber}}
										</el-button>
									</el-tooltip>
									<!-- 取消收藏按钮 -->
									<el-tooltip class="item" effect="dark" content="取消收藏" placement="top-start" v-else>
										<el-button :data-id="cardItem.collectNumber" ref="collect"
											icon="el-icon-star-on" type="warning"
											@click="handleClick(cardItem.recommendId,index)">
											{{cardItem.collectNumber}}
										</el-button>
									</el-tooltip>
								</el-button-group>
							</el-card>
						</el-col>
					</el-row>

					<el-row v-show="emptyView" style="display: flex; justify-content: right; margin: 0px 30px;">
						<el-card style="width: -webkit-fill-available;margin: 0px 10px 10px 10px;">
							<el-empty description="这里空空如也~">
							</el-empty>
						</el-card>
					</el-row>

					<el-row style="display: flex;justify-content: right;margin: 0 25px 0 25px;" v-show="pageView">
						<el-card shadow="never" class="card-page">
							<el-pagination ref="homePage" background layout="prev, pager, next, total" :total="listNum"
								:page-size="pageSize" :current-page="currentPage" @current-change="pageChange">
							</el-pagination>
						</el-card>
					</el-row>

				</div>
			</el-col>


			<el-col style="padding: 0 40px 0 40px;" :xs="{span:24}" :sm="{span:24}" :md="{span:8}" :lg="{span:8}"
				:xl="{span:8}">
				<div class="grid-content">
					<el-card class="box-card card-list" shadow="never" v-loading='list_loading_ranking'
						element-loading-text="拼命加载资源中" element-loading-background="rgba(255, 255, 255, 1)">
						<template #header>
							<div class="card-header">
								<i class="el-icon-s-data"></i>
								<span style="margin: -2px 0 0 5px;">本周热门排行</span>
								<!-- <el-button class="button" type="text">操作按钮</el-button> -->
							</div>
						</template>
						<el-scrollbar max-height="400px">
							<div v-for="(rankingItem,index) in rankingList" :key="index" class="ranking-list-item"
								style="margin-bottom: 35px;display: flex;align-items: flex-end;">
								<div style="font-size: 22px;float: left;margin-right: 10px;">{{index+1 }}
									<i style="color: #1e67bd;" class="el-icon-trophy-1" v-if="index<=0"></i>
									<i style="color: #4e8e07;" class="el-icon-top" v-else-if="index>0&&index<=2"></i>
									<i style="color: #FFFFFF;" class="el-icon-minus" v-else></i>
								</div>
								<div style="display: flex;align-items: center;flex: 1 0;">
									<img width="32" height="32" :src="rankingItem.icon" class="image" />
									<el-link target="_blank"
										:href="getRootPath()+'/detail?rid='+rankingItem.recommendId" :underline="false"
										style="margin-left: 10px;">{{rankingItem.recommendName}}</el-link>
									<!-- <div class="ranking_readNum">
										阅读量：{{rankingItem.viewNumber}}
									</div> -->
								</div>
							</div>
						</el-scrollbar>
					</el-card>

				</div>
			</el-col>
		</el-row>
		<el-row style="justify-content: center;align-items: center;">
			<div style="font-size: 14px;height: 40px;display: flex;justify-content: center;align-items: center;">
				{{myInfo}}
			</div>
		</el-row>
		<el-backtop />
	</div>


</template>

<script>
	import Qs from 'qs';
	export default {
		created() {
			Promise.all([this.getAllResources(1, 6), this.getViewRanking()])
				.then(function(results) {
					const acct = results[0];
					const perm = results[1];
				});			
		},
		mounted() {
		},
		data() {
			return {
				list_loading_main: true,
				list_loading_ranking: true,
				pageView: false,
				emptyView: false,
				listNum: 0,
				currentPage: 1,
				pageSize: 6,
				myInfo: '© 2021 编程科技导航 | 页面设计＆前端开发 by 软工195 ZY',
				//排行榜数据
				rankingList: [],
				//卡片展示数据
				cardList: [],
				//标签页子菜单数据
				items: [{
						index: '0',
						title: 'Java',
						details: '<h2>Java</h2>'
					},
					{
						index: '1',
						title: 'Python',
						details: '<h2>Python</h2>'
					}
				]
			}
		},
		methods: {
			changePageTotalStyle(){
				this.$nextTick(()=>{
					this.$refs.homePage.$el.children[3].innerHTML = '总共' + ' ' + this.listNum + ' ' + '条记录';
					this.$refs.homePage.$el.children[3].style.margin ='0 10px 0 10px';
				})
			},
			pageChange(currentPage) {
				this.currentPage = currentPage;
				this.cardList = [];
				this.list_loading_main = true;
				this.getAllResources(currentPage, 6);
			},

			getAllResources(r_pageNum = 1, r_pageSize = 6) {
				let that = this;
				this.$axios({
					url: 'http://localhost:8080/findResource/getAllResource',
					method: 'post',
					headers: {
						'token': localStorage.pg_token
					},
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return Qs.stringify(data);
					}],
					data: {
						pageNum: r_pageNum,
						pageSize: r_pageSize,
						userId: localStorage.pg_username,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.cardList = result.data.result;
							// console.log(that.cardList[0])
							that.listNum = result.data.page_sum;
						} else {
							that.emptyView = true;
							// that.$message.error(result.msg);
							if (localStorage.pg_username === undefined) {
								that.$message.error("登陆后解锁浏览权限");
							} else {
								that.$message.error(result.msg);
							}
						}
						that.pageView = true;
						that.list_loading_main = false;
						that.list_loading_ranking = false;
						return data;
					}],
				}).catch(function(error) {
					that.emptyView = true;
					that.list_loading_main = false;
					that.list_loading_ranking = false;
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
					this.changePageTotalStyle();
				}).then(()=>{
					this.changePageTotalStyle();
				})
			},

			//获取浏览量排行榜数据
			getViewRanking() {
				let that = this;
				this.$axios({
					url: 'http://localhost:8080/findResource/getRanking',
					method: 'get',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return Qs.stringify(data);
					}],
					headers: {

						'token': localStorage.pg_token
					},
					params: {
						// recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.rankingList = result.data;
						} else {
							that.$message.error(result.msg);
						}
						that.list_loading = false;
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});
			},

			getRootPath() {
				//获取当前网址，如： http://localhost:8088/test/test.jsp
				let curPath = window.document.location.href;
				//获取主机地址之后的目录，如： test/test.jsp
				let pathName = window.document.location.pathname;
				let pos = curPath.indexOf(pathName);
				//获取主机地址，如： http://localhost:8088
				let localhostPath = curPath.substring(0, pos);
				//获取带"/"的项目名，如：/test
				let projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
				return (localhostPath); //发布前用此4
			},

			handleClick(tab, event) {
				console.log(tab, event)
			},
			openFullScreen(time) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				setTimeout(() => loading.close(), time)
			},
			handleLink(url) {
				window.open(url, '_blank');
			},
			handleCpoy(id) {
				//根据规则生成链接
				let copyText = "我在编程科技导航发现了一个精品资源，这是链接：" + id + "，快来看看吧~";
				this.$copyText(copyText).then(
					(e) => {
						this.$message.success("已复制链接，快去分享吧~");
						// console.log(e) // {action: "copy", text: "Hello World", trigger: button, clearSelection: ƒ}
					},
					(e) => {
						this.$message.error("抱歉，复制失败！")
					})
			},
			handleClick(rid, index) {
				let that = this;
				// console.log('rid',rid);
				this.$axios({
					url: 'http://localhost:8080/findResource/collectResource',
					method: 'get',
					transformRequest: [function(data) {
						// 对 data 进行任意转换处理
						return data;
					}],
					headers: {
						'token': localStorage.pg_token
					},
					params: {
						userId: localStorage.pg_username,
						recommendId: rid,
					},
					transformResponse: [function(data) {
						// 对接收的 data 进行任意转换处理
						let result = JSON.parse(data);
						if (result.code === 200) {
							that.cardList[index].hasCollect = result.data.hasCollect;
							that.cardList[index].collectNumber = result.data.collectNumber;
							that.$message.success(result.data.msg);
						} else {
							that.$message.error(result.msg);
						}
						return data;
					}],
				}).catch(function(error) {
					if (error.response) {
						// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
						that.$message.error("服务器响应出错，请稍后再试");
						// console.log(error.response.data);
						// console.log(error.response.status);
						// console.log(error.response.headers);
					} else if (error.request) {
						// 请求已经成功发起，但没有收到响应
						// `error.request` 在浏览器中是 XMLHttpRequest 的实例，
						// 而在node.js中是 http.ClientRequest 的实例
						that.$message.error("请求服务器错误或超时,请稍后再试");
					} else {
						// 发送请求时出了点问题
						that.$message.error("发送请求出现问题，请稍后再试");
					}
				});
				// this.similarList[index].hasCollect = !this.similarList[index].hasCollect;
			}
		}
	}
</script>


<style scoped>
	/* .ranking-list-item{
		background-color: #eaeaea;
	} */
	a {
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}


	.tag-style {
		margin: 0 0.3125rem 0.3125rem 0;
		border-radius: 0.3125rem;

	}

	.tag-speciall-style {
		font-weight: 600;
		font-family: '微软雅黑';
	}

	.card-page {
		width: -webkit-fill-available;
		cursor: default !important;
		margin: 0 0.9375rem 0 0.9375rem;
		border-radius: 0.3125rem;
	}

	.pageHeadr {
		background: #fff;
		border: 1px solid var(--el-border-color-base);
		box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
		height: 70px;


	}

	.ranking_readNum {
		margin: -5px 0 0 15px;
		color: #999999;
		font-size: 14px;
		float: right;
	}

	.card_child:hover .home_card_title {
		color: #0D84FF;
		font-weight: 500;
		transition: .1s;
	}

	.card-list {
		margin-top: 0px !important;
		height: 100%;
		box-sizing: border-box;
		cursor: default !important;
		text-align: left;
	}

	.card-list-item {
		margin: 5px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}

	.bottom {
		padding: -5px;
	}

	.home_card_title {
		color: #000000;
	}


	.home_card_content {
		/* padding: 10px; */
		color: #999999;
		font-size: 14px;
		text-align: center;
		margin: 1rem 0 1rem 0;
		min-height: 55px;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.pageTabs {
		text-align: left;
		margin: 0 15px 0 15px;
	}

	.el-page-header {
		height: 100%;
		align-items: center;
	}


	.main {
		/* height: 500px; */
		/* display: flex; */
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		/* background: #f3f3f3; */
		box-sizing: border-box;
	}

	.error-page {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #f3f3f3;
		box-sizing: border-box;
	}

	.error-code {
		line-height: 1;
		font-size: 250px;
		font-weight: bolder;
		color: #2d8cf0;
	}

	.error-code span {
		color: #00a854;
	}

	.error-desc {
		font-size: 30px;
		color: #777;
	}

	.error-handle {
		margin-top: 30px;
		padding-bottom: 200px;
	}

	.error-btn {
		margin-left: 100px;
	}
</style>
